<template>
  <div class="box">
      <div class="top">
       <img src="images/ (1).jpg" alt="">
      </div>
      <div class="self">
        <img src="images/ (2).webp" alt="">
        <p style="margin-left:.15rem">用户名</p>
        <p>></p>
      </div>
      <div class="vip">
         <img src="images/ (2).jpg" alt="">
          <p>VIP免广告，首月只要1.99元起</p>
         <span>开通会员<b>></b></span>
      </div>
      <div class="new">
        <ul>
          <li><h2>0</h2>
          <p>我的专辑</p></li>
          <span>|</span>
          <li>
            <h2>0</h2>
            <p>文章/视频</p>
            
          </li>
          <span>|</span>
          <li>
            <img src="images/ (3).jpg" alt="">
            <p>我的收藏</p>
          </li>
        </ul>
      </div>
      <div class="pic">
      <img src="images/ (4).jpg" alt="">
      </div>
      <div class="pic1">
<h2>我的消息 <span>></span></h2>
<p>今天未收到点赞/关注/粉丝</p>
      </div>
      <div class="service">
        <h2>更多服务</h2>
        <ul>
          <li @click="fun()"><img src="images/ (6).jpg" alt="">
          <p>护苗行动</p></li>
          <li>
            <img src="images/ (7).jpg" alt="">
            <p>护糖中心</p>
          </li>
          <li>
            <img src="images/ (8).jpg" alt="">
            <p>我的订阅</p>
          </li>
          <li>
            <img src="images/ (9).jpg" alt="">
            <p>达人认证</p>
          </li>
          <li>
            <img src="images/ (10).jpg" alt="">
            <p>原创保护</p>
          </li>
          <li>
            <img src="images/ (11).jpg" alt="">
            <p>达人推荐</p>
          </li>
          <li>
            <img src="images/ (12).jpg" alt="">
            <p>邀请好友</p>
          </li>
          <li>
            <img src="images/ (13).jpg" alt="">
            <p>青少年入口</p>
          </li>
        </ul>
      </div>
      <Foot/>
  </div>
</template>

<script>
import Foot from "@/components/foot.vue";
export default {
  methods: {
    fun(){
       this.$router.push("/spot")
    }
  },
   components:{
  
    Foot
  },
}
</script>

<style scoped>
.box{
  background-color: #fafafa;
}
.top{
  height: .5rem;
  /* background-color: rgb(19, 16, 16); */
  border-bottom: .005rem solid gray;
}
.top>img{
  float: right;
  margin-right: .2rem;
  width: .3rem;
  height: .3rem;
  margin-top: .1rem;
}
.self{
  display: flex;
  background-color: #fafafa;
  padding: .1rem 0;
  align-items: center;
  position: relative;
  
}
.self>img{
  width: .945rem;
  height: .945rem;
  border-radius: 50%;
  vertical-align: center;
}
.self>p{
  font-size: .18rem;
  font-weight: 600;
}
.self>p:nth-child(3){
position: absolute;
right: .15rem;
  color: gray;
}
.vip{
  display: flex;
  align-items: center;
  margin-top: .1rem;
  background-color: #fff5f4;
  margin: 0 .1rem;
  height: .4rem;
  border-radius: .05rem;
  position: relative;
  font-size: .15rem;
}
.vip>p{
   height: .285rem;
 line-height: .285rem;
}
.vip>img{
  width: .285rem;
  height: .285rem;
}
.vip>span{
 position: absolute;
 right: .1rem;
  color: #e99f9e;
  font-weight: 600;
}
.vip>span>b{
  margin-left: .05rem;
}
.new>ul{
  margin-top: .1rem;
display: flex;
justify-content: center;
background-color: #fff;
}

.new>ul>li{
  flex:1;
  text-align: center;
  height: .5rem;
  background-color: #fff;
  /* background-color: indianred; */
}
.new>ul>li>h2{
  font-size: .15rem;
}
.new>ul>li>p{
  color: gray;
}
.new>ul>li>img{
  width: .4rem;
  height: .2rem;
}
.new>ul>li>h2{
  margin-bottom: .05rem;
}
.new>ul>span{
  font-size: .25rem;
  font-weight: 100;
  color: gray;
}
.pic{
  width: 98%;
  margin: 0 auto;
  margin-top: .1rem;
 height: 1.2rem;

}
.pic>img{
  width: 100%;
  height: 100%;
}
.pic1{
  width: 98%;
  margin: 0 auto;
  margin-top: .1rem;
 height: .8rem;
 /* background-color: lightpink; */
font-size: .15rem;
border: .005rem solid transparent;
background-color: #fff;
margin-bottom: .1rem;
}
.pic1>h2{
  margin: .15rem .15rem;
  font-size: .2rem;
}
.pic1>h2>span{
  float: right;
  margin-right: .15rem;
  color: gray;
  font-size: .15rem;
}
.pic1>p{
  margin-left: .2rem;
  color: gray;
  font-size: .15rem;
}
.service{
  background-color: #fff;
}
.service>ul{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.service>h2{
  margin-left: .2rem;
  font-size: .2rem;
  margin-top: .3rem;
}
.service>ul>li{
width: 25%;
text-align: center;
}
.service>ul>li>img{
  width: .6rem;
  height: .6rem;
}
</style>